<script setup lang="ts">
import { useGsapContext } from '@/hooks'
import { gsap } from 'gsap'
import { useTemplateRef } from 'vue'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

defineProps<{
  title: string[]
  desc: string
  coverSrc: {
    mo: string
    pad: string
    pc: string
  }
}>()

const { scrollGroup } = useScrollGroup()

const containerRef = useTemplateRef<HTMLDivElement | null>('containerRef')
const imgRef = useTemplateRef<HTMLImageElement | null>('imgRef')

useGsapContext(() => {
  if (!containerRef.value) {
    return
  }

  gsap.fromTo(
    containerRef.value,
    {
      yPercent: 10,
    },
    {
      yPercent: 0,
      scrollTrigger: {
        trigger: containerRef.value,
        start: 'top bottom',
        end: 'bottom bottom',
        toggleActions: 'play none play reverse',
        invalidateOnRefresh: true,
        ...scrollGroup,
      },
    },
  )
})
</script>

<template>
  <div ref="containerRef" class="_rounded overflow-hidden sm:grid sm:grid-cols-2 sm:grid-rows-1">
    <div
      class="bg-white py-[2.25rem] px-[1.125rem] sm:p-[3.125vw] sm:grid sm:content-center sm:gap-y-[1rem] sm:col-start-2 sm:row-start-1 lg:gap-y-[clamp(1rem,0rem+1.5625vw,1.5rem)] lg:p-[clamp(2.625rem,-0.125rem+4.2969vw,4rem)]"
    >
      <div class="text-3xl sm:text-2xl md:text-3xl lg:text-[clamp(2rem,0rem+3.125vw,3rem)]">
        <p v-for="(i, key) in title" :key>{{ i }}</p>
      </div>

      <p class="text-base max-sm:mt-[1.25rem] lg:text-lg">{{ desc }}</p>
    </div>

    <div class="w-full aspect-[383/350] sm:aspect-[164/145] sm:col-start-1 sm:row-start-1">
      <picture>
        <source media="(min-width: 1024px)" :srcset="coverSrc.pc" />
        <source media="(min-width: 640px)" :srcset="coverSrc.pad" />
        <img
          ref="imgRef"
          class="w-full h-full object-cover"
          :src="coverSrc.mo"
          alt=""
          loading="lazy"
        />
      </picture>
    </div>
  </div>
</template>
